{extend name="main"}
{block name="style"}
<style type="text/css">
    .flex-lable {
        width: 100px;
        color: #6c757d;
        text-align: right;
        padding-right: 10px;
    }

    .w-100px {
        width: 100px;
    }
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3">
    <el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right" class="flex py-3">
        <el-form-item label="搜索类型" prop="search_type" class="flex mb-0 pl-3">
            <el-select v-model="search.type" placeholder="请选择" class="w-100px">
                <el-option key="text" label="文本" value="text"></el-option>
                <el-option key="img" label="图片" value="img"></el-option>
                <el-option key="exchange_wechat" label="交换微信" value="exchange_wechat"></el-option>
                <el-option key="exchange_mobile" label="交换手机号" value="exchange_mobile"></el-option>
                <el-option key="resume" label="简历" value="resume"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="发送者UID" prop="key" class="flex mb-0 pl-3">
            <el-input v-model="search.senduid" placeholder="请输入你想搜索的关键词"></el-input>
        </el-form-item>
        <el-form-item label="接收者UID" prop="key" class="flex mb-0 pl-3">
            <el-input v-model="search.touid" placeholder="请输入你想搜索的关键词"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="key" class="flex mb-0 pl-3">
            <el-input v-model="search.key" placeholder="请输入你想搜索的关键词"></el-input>
        </el-form-item>

        <el-form-item class="flex mb-0 pl-3">
            <el-button type="primary" @click="initHtml">查询</el-button>
            <el-button @click="resetForm('search')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<div class="bg-white p-3">
    <div class="table-responsive">
        <el-table :data="tableData" v-loading="search.ajax" style="width: 100%;"
            header-cell-class-name="table-header-DDE6FB">
            <el-table-column prop="id" label="ID" width="100">
            </el-table-column>
            <el-table-column label="发送者" min-width="100">
                <template slot-scope="scope">
                    <div class="flex flex-center">
                        <el-image v-if="scope.row.send_info.headimg" style="width: 30px; height: 30px" lazy
                            class="rounded-circle mr-2" :src="scope.row.send_info.headimg"
                            :preview-src-list="[scope.row.send_info.headimg]">
                        </el-image>
                        <div>
                            <el-link target="_blank" :underline="false">{{scope.row.send_info.nickname}}</el-link>
                            <div>{{ scope.row.send_info.title }}</div>
                            <div>{{ scope.row.send_info.name }}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="接收者" min-width="100">
                <template slot-scope="scope">
                    <div class="flex flex-center">
                        <el-image v-if="scope.row.to_info.headimg" style="width: 30px; height: 30px" lazy
                            class="rounded-circle mr-2" :src="scope.row.to_info.headimg"
                            :preview-src-list="[scope.row.to_info.headimg]">
                        </el-image>
                        <div>
                            <el-link target="_blank" :underline="false">{{scope.row.to_info.nickname}}</el-link>
                            <div>{{ scope.row.to_info.title }}</div>
                            <div>{{ scope.row.to_info.name }}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
			
			
			            <el-table-column label="内容" width="240">
                <template slot-scope="scope">
                    <!-- text
                        img
                        exchange_wechat
                        exchange_mobile
                        resume -->
                    <div v-if="scope.row.type=='text'">{{scope.row.content.msg}}</div>

                    <el-image v-else-if="scope.row.type=='img'" style="width: 30px; height: 30px" lazy
                        :src="scope.row.content.url+scope.row.content.msg"
                        :preview-src-list="[scope.row.content.url+scope.row.content.msg]">
                    </el-image>
                    <!-- 0:等待接受, 1:已接受, 2:拒绝 -->
                    <div v-else-if="scope.row.type=='exchange_wechat'">
                        <div v-if="scope.row.content.msg.status==0" class="text-primary">等待接受</div>
                        <div v-else-if="scope.row.content.msg.status==1">
                            <div class="border rounded p-2 small">
                                <div>{{scope.row.content.msg.name}}</div>
                                <div>{{scope.row.content.msg.wechat}}</div>
                            </div>
                            <div class="border rounded p-2 small mt-2">
                                <div>{{scope.row.content.msg.toname}}</div>
                                <div>{{scope.row.content.msg.towechat}}</div>
                            </div>
                        </div>
                        <div v-else-if="scope.row.content.status==2" class="text-danger">拒绝交换</div>
                    </div>
                    <div v-else-if="scope.row.type=='exchange_mobile'">
                        <div v-if="scope.row.content.msg.status==0" class="text-primary">等待接受</div>
                        <div v-else-if="scope.row.content.msg.status==1">
                            <div class="border rounded p-2 small">
                                <div>{{scope.row.content.msg.name}}</div>
                                <div>{{scope.row.content.msg.mobile}}</div>
                            </div>
                            <div class="border rounded p-2 small mt-2">
                                <div>{{scope.row.content.msg.toname}}</div>
                                <div>{{scope.row.content.msg.tomobile}}</div>
                            </div>
                        </div>
                        <div v-else-if="scope.row.content.msg.status==2" class="text-danger">拒绝交换</div>
                    </div>
                    <div v-if="scope.row.type=='resume'" class="border rounded p-2 small">
                        <div>{{scope.row.content.msg.name}}的在线简历</div>
                        <div class="pt-2 flex flex-center">
                            <div>{{scope.row.content.msg.sex==1?'男':'女'}}</div>
                            <div class="mx-1 border-left py-1"></div>
                            <div>{{scope.row.content.msg.age}}岁</div>
                            <div class="mx-1 border-left py-1"></div>
                            <div>{{scope.row.content.msg.educational_background}}</div>
                            <div class="mx-1 border-left py-1"></div>
                            <div>{{scope.row.content.msg.work_experience_time}}年工作经验</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
			
			
            <el-table-column label="消息类型" width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.type=='text'">文本</div>
                    <div v-if="scope.row.type=='img'">图片</div>
                    <div v-if="scope.row.type=='exchange_wechat'">交换微信</div>
                    <div v-if="scope.row.type=='exchange_mobile'">交换手机号</div>
                    <div v-if="scope.row.type=='resume'">简历</div>
                </template>
            </el-table-column>
            <el-table-column label="撤回状态" width="80">
                <template slot-scope="scope">
                    <transition>
                        <el-button type="success" size="minism" v-if="scope.row.withdraw==1">已撤回</el-button>
                        <el-button type="info" size="minism" v-else="scope.row.withdraw==0">未撤回</el-button>
                    </transition>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="80">
                <template slot-scope="scope">
                    <transition>
                        <el-button type="success" size="minism" v-if="scope.row.is_read==1">已读</el-button>
                        <el-button type="info" size="minism" v-else="scope.row.is_read==0">未读</el-button>
                    </transition>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="180">
            </el-table-column>
        </el-table>
    </div>
    <div class="table-responsive py-3 text-center">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="search.page" :page-sizes="[10,50,100,200]" :page-size="search.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="search.total">
        </el-pagination>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
</script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            view: XYBase.view,
            labelPosition: 'right',
            showLog: false,
            dialogVisible: false,
            search: {
                senduid: '',
                touid: '',
                type: '',
                content: '',
                ajax: false,
                page: 1,
                total: 0,
                pageSize: 10
            },
            tableData: [],
        },
        watch: {
            view: XYBase.viewWatch,
        },
        created() {
            XYBase.created(this);
        },
        methods: {
            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            },
            handleSizeChange(val) {
                this.search.page = 1;
                this.search.pageSize = val;
                this.initHtml();
            },
            handleCurrentChange(val) {
                this.search.page = val;
                this.initHtml();
            },
            initHtml() {
                var _this = this;
                _this.search.ajax = true;
                $.ajax({
                    url: '',
                    type: 'get',
                    data: _this.search,
                    dataType: 'json',
                    error: function (err) {
                        _this.search.ajax = false;
                        XYBase.error(XYBase.config.system_network_error);
                    },
                    success: function (ret) {
                        _this.search.ajax = false;
                        if (ret) {
                            if (ret.code === 0) {
                                _this.search.total = ret.data.total;
                                _this.tableData = ret.data.data;
                            } else {
                                XYBase.msg(ret.msg);
                            }
                        } else {
                            XYBase.error(XYBase.config.system_network_error);
                        }
                    }
                });
            }
        }
    });
    $(function () {
        vm.initHtml();
        reloadWindowSize();
        $(window).resize(function () {
            reloadWindowSize();
        });
    });
    function reloadWindowSize(argument) {
        var winW = $(window).width();
        if (winW <= 576) {
            vm.labelPosition = 'top';
        } else {
            vm.labelPosition = 'right';
        }
    }
</script>
{include file="business"/}
{/block}